<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../library/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../webFonts/iconfont.css">
    <link rel="stylesheet" href="./style/index.css">
    <link rel="stylesheet" href="style/features.css">
    <title>十八度灰</title>
</head>
<body>
<article id="neutrey">
    <aside id="favor" class="opened">
        <ul>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
            <li>
                <span class="favor_icon">&#x263a;</span>
                <span class="favor_text">十八度灰</span>
            </li>
        </ul>
    </aside>
    <article id="main" class="opened">
        <header id="description">
            <section class="left_part">
                <figure id="logo"></figure>
                <div id="menu">
                    <div id="home"  class="category_title">
                        <span>总揽</span>
                    </div>
                    <div id="category">
                        <div class="category_title">
                            <span>功能</span>
                            <span class="icon">&#x2228;</span>
                        </div>
                        <section id="sub_menu">
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>商品</em>
                                </dt>
                                <dd>
                                    <a href="./commodity-manage.html" class="product_link_item">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品管理</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./commodity-category-manage.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品品类</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./product-brand.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品品牌</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./features.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品属性</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./commodity-fabric.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>商品面料</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./customize-generation.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>年龄段</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>店柜和员工</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="./department.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>组织架构</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./users-manage.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>用户管理</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./regional-division.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>区域划分</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>客户</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="./customer-information.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>客户信息</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="./complaints.html">
                                        <i class="icon">&#x263a;</i>
                                        <span>客户投诉</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>平台功能</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                            </dl>
                            <dl class="product_list">
                                <dt class="product_title">
                                    <em>平台功能</em>
                                </dt>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                                <dd>
                                    <a class="product_link_item" href="#">
                                        <i class="icon">&#x263a;</i>
                                        <span>云服务器</span>
                                    </a>
                                </dd>
                            </dl>
                        </section>
                    </div>
                </div>
            </section>
            <section class="right_part">
                <span>个人</span>
                <span>修改密码</span>
                <span>退出</span>
            </section>
        </header>
        <section id="content">
            <div id="collapse" class="opened">
                <<
            </div>
            <div class="panel_header container-fluid">
                <div class="button-group">
                    <button class="add-product-template btn btn-default">新增商品属性</button>
                </div>
                <h2>商品属性</h2>
                <form action="" class="form-inline">
                    <div class="input-group">
                        <input type="text" class="form-control"/>
                    </div>
                    <button class="btn btn-default glyphicon glyphicon-search"></button>
                </form>
            </div>
            <article class="container-fluid">
                <div class="panel_title row">
                    <div class="attribute col-md-8 col-sm-9">属性</div>
                    <div class="type col-md-4 col-sm-3">类型</div>
                </div>
                <article class="list">
                    <div class="list-item row" id="size">
                        <div class="attribute col-md-8 col-sm-9">尺码</div>
                        <div class="type col-md-4 col-sm-3">单选</div>
                    </div>
                    <div class="list-item row" id="download_size">
                        <div class="attribute col-md-8 col-sm-9">下装尺码</div>
                        <div class="type col-md-4 col-sm-3">单选</div>
                    </div>
                    <div class="list-item row">
                        <p class="nomore">已没有更多</p>
                    </div>
                </article>
            </article>
            <div class="panel_footer">
                <p>共3条商品属性</p>
            </div>
            <article class="aside-slider-content">
                <div class="panel_header">
                    商品属性详情
                    <span class="glyphicon glyphicon-remove cancel"></span>
                </div>
                <article class="panel_body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="item-title">属性</div>
                            <div class="item-value">下装尺码</div>
                        </li>
                        <li class="list-group-item">
                            <div class="item-title">类型</div>
                            <div class="item-value">单选</div>
                        </li>
                    </ul>
                </article>
                <div class="panel_footer">
                    <button class="btn btn-default" id="button_edit_product_attribute">编辑</button>
                    <button class="btn btn-default" id="button_delete_product_attribute">删除</button>
                    <button class="btn btn-default" id="button_add_product_attribute">添加属性</button>
                </div>
            </article>
        </section>
        <footer id="copyRight">
            Copyright © 2017 - 2018 neutrey.com. All Rights Reserved.
        </footer>
    </article>
</article>
<div class="masking"></div>
<article class="modal-fixed panel container-product-template">
    <div class="panel_header">
        新增商品基础属性模板
        <span class="glyphicon glyphicon-remove cancel"></span>
    </div>
    <form action="" class="panel_body">
        <ul class="list-group">
            <li class="list-group-item">
                <div class="input-group">
                    <label for="product_attribute">属性</label>
                    <input type="text" class="form-control" id="product_attribute"/>
                </div>
            </li>
            <li class="list-group-item">
                <div class="input-group">
                    <label for="product_type">类型</label>
                    <input type="text" class="form-control" id="product_type" />
                </div>
            </li>
        </ul>
    </form>
    <div class="panel_footer">
        <button class="btn btn-primary" id="save_add_next">保存并添加下一个</button>
        <button class="btn btn-primary" id="save">保存</button>
        <button class="btn btn-default cancel">取消</button>
    </div>
</article>
<article class="modal-small panel container-delete-product-template">
    <div class="panel_header">删除商品基础属性模板<span class="glyphicon glyphicon-remove cancel"></span></div>
    <div class="panel_body">
        <p class="iconfont">&#xe636;</p>
        <p>
            你确定要删除此商品属性?<br />
            属性：尺码<br />
            类型：单选
        </p>
    </div>
    <div class="panel_footer">
        <button class="btn btn-primary" id="save_delete">确定</button>
        <button class="btn btn-default cancel">取消</button>
    </div>
</article>
<article class="modal-large pan container-add-product-template" style="display: none;">
    <div class="panel_header">
        <span>添加商品属性</span>
        <span class="glyphicon glyphicon-remove cancel"></span>
    </div>
    <div class="panel_body">
        <div class="panel-body-top">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="input-group">
                        <label for="attribute_name">属性名</label>
                        <input type="text" class="form-control" id="attribute_name" name="attribute_name"/>
                    </div>
<!--                    出错时显示错误信息
                    <p class="error">不能为空</p>-->
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <label for="attribute_value">属性值</label>
                        <input type="text" class="form-control" id="attribute_value" name="attribute_value"/>
                    </div>
<!--                    出错时显示错误信息
                    <p class="error">不能为空</p>-->
                </li>
            </ul>
            <div class="button-group text-right">
                <button class="add-attribute btn btn-primary">添加</button>
                <button class="cancel-add btn btn-default">取消</button>
                <button class="sure-attribute btn btn-primary" style="display: none">确认</button>
                <button class="cancel-sure btn btn-default" style="display: none">取消</button>
            </div>
        </div>

        <div class="panel-body-bottom">
            <ul class="attribute_list_group">
                <li class="attribute_list_item row">
                    <span class="col-sm-2 property_name">属性名1</span>
                    <span class="col-sm-8 property_value">属性值1</span>
                    <span class="col-sm-1 glyphicon glyphicon-edit"></span>
                    <span class="col-sm-1 glyphicon glyphicon-remove"></span>
                </li>
                <li class="attribute_list_item row">
                    <span class="col-sm-2 property_name">属性名2</span>
                    <span class="col-sm-8 property_value">属性值2</span>
                    <span class="col-sm-1 glyphicon glyphicon-edit"></span>
                    <span class="col-sm-1 glyphicon glyphicon-remove"></span>
                </li>
                <li class="attribute_list_item row">
                    <span class="col-sm-2 property_name">属性名3</span>
                    <span class="col-sm-8 property_value">属性值3</span>
                    <span class="col-sm-1 glyphicon glyphicon-edit"></span>
                    <span class="col-sm-1 glyphicon glyphicon-remove"></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel_footer text-right">
        <button class="btn btn-primary" id="save_add_product_template">保存</button>
        <button class="btn btn-default cancel">取消</button>
    </div>
</article>
<script src="../library/jquery-3.1.1.min.js"></script>
<script src="../library/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../scripts/index.js"></script>
<script src="../scripts/features.js"></script>
</body>
</html>